Skip to content
旅botミニを公開しました 1.紹介&練習設定編|まぁ/Masahiro Fukushima
note記述記事
2025-01-12T10:32:04.000Z

見出し画像

旅botミニを公開しました 1.紹介&練習設定編

2025年1月12日 19:32

MCP に対応した旅bot の機能サブセット版をnpmに公開しました。
Claude Desktop を設定可能な方は設定をする事で、AI アバターをあっちこっち旅させることができます。

@mfukushim/map-traveler-mcp Virtual traveler library for MCP. Latest version: 0.1.1, last www.npmjs.comlink

サブセット版と言いつつ、自動で到着報告をしないことを除けば、概ねこちらのほうが賢い動作をします。新機軸機能もあります。
興味がある方は試してみてください。
これ単体で使うというよりは、これを基に自分向きに旅するAIアバターを作るような機能部品という種類のものです。応用例についても後々言及してみようと思います。

と言いつつ、旅bot を動かすにはGoogle map API や画像生成AI、pythonの設定などいろいろな機能を必要です。その設定は結構煩雑です。ローカル機材を減らすために(少額ですが)有償API も使います。

設定の敷居は結構高いと思ったのでAPI一切なしに「こんな感じ」を体験出来る「練習モード」機能を入れています。

そこで今回は簡単な動作紹介とAPI なしで雰囲気を体験出来る「練習モード」の紹介です。

Mimi(map-traveler-mcp)とは

今回の旅bot サブセット版(mini mi=略称mimi)は以前GPTsで旅botを作れないか検討したが無理っぽかったものをMCP というもっとガチよりのAI インタフェースで実装したものです。

link

このときの検討ではGPTsだけでは難しい(無理にやっても、なんちゃってが過ぎる)という判断でした。今回MCPではかなりガチにプログラムインタフェースが定義されたので既存のmiのコードを一部取り込んでMCP制御できるように作りました。

現時点Claude Desktop 上で旅botと同様にアバターを指示してGoogle map上のあっちこっちの場所を旅することが出来ます。

旅画面例

まぁ専用ソフトではないので、確認画面が出たり旅画像を見るのに一操作必要だとかいろいろ制約はあるのですがmimiの操作API は公開しているのでAIプロンプトを書けば自分好みの姿や挙動にも出来ると思います。また一種のGoogle map API+画像生成AI のインタフェースにもなるので自作ゲームとかにも応用出来ると思います(そのあたりも後々)

設定について

先にも言ったように外部クラウドのAPI をいろいろ使うので、少々設定が必要です。
こういうのに慣れてる人は以下のClaude Desktop の設定見ればわかると思うので置いて置きます。これで一気に設定してもokです。

必要な物と条件

Claude Desktop (winまたはmac)
Nodejs (バージョン22推奨)
Python とrembgのインストールしてrembg cliが動くように設定する(python3.8以上、3.11以下。venvなど仮想環境推奨)

Claude の設定

claude_desktop_config.json の設定値

{
  "mcpServers": {
    "traveler": {
      "command": "npx",
      "args": ["-y", "@mfukushim/map-traveler-mcp"],
      "env":{
      	  	"GoogleMapApi_key":"(Google Map APIのキー)",
            "pixAi_key":"(pixAi APIのキー)",
			"sd_key":"(またはStability.aiのAPIのキー",
			"sqlite_path":"(db保存ファイルのパス 例 %USERPROFILE%/Desktop/traveler.sqlite など)",
			"rembg_path": "(インストールしたrembgの絶対パス)",
            "bs_id":"(bluesky snsの登録アドレス)",
			"bs_pass":"(bluesky snsのパスワード)",
			"bs_handle":"(bluesky snsのハンドル名 例 xxxxxx.bsky.social など)"
      }
    }
  }
}

必要なkey,ID類

  • Google Map APIキー (次の権限が必要 Street View Static API, Places API (New) , Time Zone API, Directions API)

  • 画像生成AI APIキー(pixAIまたはStability.aiの画像生成キー)

  • Bluesky SNS id (自動ポストするので専用id 取得推奨)

Windows/mac可能。

これだけでわかる人は設定して挑戦して動かしてみてください。

でも、これだけではちょっと敷居が高いので順々に設定していきます。

nodejsの設定

現時点の最新のnodejs 22をインストールしてください。
公式の手順は以下のものです。

Node.js — Run JavaScript Everywhere Node.js® is a free, open-source, cross-platform JavaScript ru nodejs.orglink

無難には「Windows Installer (.msi)」や「macOS Installer (.pkg)」などのインストーラー付きが分かりやすいですが自分向きの方法でどうぞ。

Node.js — Download Node.js® Node.js® is a free, open-source, cross-platform JavaScript ru nodejs.orglink

インストール後にターミナル等のコマンド入力画面を開いて

node --version

を入力し、

v22.12.0

など v22が出ればインストール完了です。
その他、いろんなサイトでnodejsのインストールについて書かれたネット記事がありますので分かりやすいものをご確認ください。ClaudeやChatGPTに聞いてもよいかもです。
確認はしていないですがnodejs20あたりでも動くと思います。

Claude Desktop のインストール

AntropicのサイトからClaude Desktop をインストールしてください。

Download Claude | Claude Download Claude for desktop and mobile. Access AI assistance claude.ailink

WindowsまたはmacOSからClaude for Desktopをインストール

Googleアカウントや電話認証とかいろいろ来ると思いますがとりあえず動くように設定してください。

「こんにちは」の返事が得られればokです。

Claude Desktop の設定

Claude DesktopのMCP用設定に登録します。Configをエディタで開いてください。

Setting>develop でEdit Configを選びます

clude_desktop_config.jsonをメモ帳などのエディタで開きます。

次の記述を追加します。

{
  "mcpServers": {
    "traveler": {
      "command": "npx",
      "args": ["-y", "@mfukushim/map-traveler-mcp"]
    }
  }
}

保存したらClaude Desktop をCntl+Qなどで終了させます。
ウィンドウを閉じるだけでは終了しません。タスクバーからも終了させてください。

Claude Desktop を再起動します。
npmサイトからmap-traveler-mcpをダウンロードするのですこし起動が遅いです。

img.png

もしエラーが出たら一旦Claude DesktopをCntr+Q,cmd+Qなどで完全に終了させて何回か再起動してみてください。 それでも直らない場合は、MCP関係エラーが出たらログを確認してください。nodejの設定が不完全かもしれません エラー画面が出ないことを確認して少し待ったら右下にツールマークが画面に出るのを確認してください。

img_1.png

img_2.png

うまくツールアイコンまで出たら 「今どこにいますか」とプロンプトを入力してください。

img_3.png

以下のMCP 確認アラートが出ます。旅botを起動してok なら「Allow for This Chat」を押してください。この確認画面は一連の会話内なら省略出来ますが基本的にはセキュリティ上の確認画面なので省略は出来ません。このあたりは現状仕方ないところです。
img_4.png

「博多(天神など福岡の地名)のホテルにいます」と出たら体験モードの起動成功です。

img_5.png

get_traveler_location_infoの行をクリックすると画像と一緒にホテル画面とAPI との通信内容が出ます。押さないと表示されないのは専用ソフトではないので、これも今は仕方ないところですね。。

img_6.png

「旅に出発してください」とプロンプトを入力してください。 再び確認画面が出てそれをokしたら、「出発しました」という内容の回答が出ます。

img_7.png

「今はどこですか」とプロンプトを入力してください。Claude相手なので意味が同じであれば言い方は自由でokです。

「今は天神(など福岡の地名)にいます。付近に駅があります」などと出ます。 get_traveler_location_infoをクリックすると画像とAPI 内容が出ます。 こんな感じでClaude と対話して旅を操作してください。 体験モードではAPIアクセスしないので福岡市の数カ所の位置画像情報を固定で持っているだけです。次の章で各API を設定していけばGoogle ストリートビューのある各所にアバターを連れていくことが出来ます。

これでも何が出来るか雰囲気は分かると思います。 またClaude 自身が持つ知識で仮想行動環境を生成AIが持つと今まで以上に膨らませた会話が出来ることが分かると思います。

あと設定支援として

/tips と入れると次に必要な設定情報を簡単に案内します。

AI製品は自分を自分で説明する機能って必要になるでしょうね。このあたりも練習に作ってみています。

img_8.png

次の記事ではGoogle Map APIや画像生成AI AIPを設定して本格的に旅シミュレーションをしてみます。

Noteの自分の記事より転記 https://note.com/marble_walkers/n/n7a8f79e4fb30